<template>
	<div class="my-input">
		<label for="code" class="myfont">{{ label }}</label>
		<div class="input-box">
			<input
				id="code"
				:type="type"
				:placeholder="placeholder || '请输入'"
				:value="value"
				@input="$emit('input', $event.target.value)"
			/>
		</div>
	</div>
</template>

<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
	name: 'MyInput',
	props: {
		value: String,
		label: String,
		placeholder: String,
		type: {
			type: String,
			default: 'text'
		}
	},
	model: {
		prop: 'value',
		event: 'input'
	}
});
</script>

<style lang="less" scoped>
input::-webkit-input-placeholder {
	color: #fff;
}
.my-input {
	display: flex;
	align-items: center;
	color: #fff;
	label {
		font-size: 29px;
		margin-right: 10px;
	}
	.input-box {
		width: 480px;
		height: 78px;
		background: url('~@/static/images/input.png') 0 0 no-repeat;
		background-size: 480px 78px;

		padding: 0 20px;
		display: flex;
		align-items: center;

		input {
			border: none;
			outline: none;
			width: 100%;
			font-size: 25px;
			color: #fff;
			background-color: transparent;
		}
	}
}
</style>
